import React, { useEffect, useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Map, Marker, InfoWindow, ScaleControl, ZoomControl, NavigationControl } from 'react-bmapgl';
import './Project_management.scss';

const BaiduMap = ({ setAddress }) => {
  const mapRef = useRef(null);
  const [center, setCenter] = useState({ lng: 104.07332, lat: 30.584715 });
  // const myCity = new window.BMapGL.LocalCity();
  //获取 map 实例对象
  // useEffect(() => {
  //   myCity.get((res) => {
  //     setCenter(res.center);
  //   });
  //   let map = mapRef.current.map;
  //   // 添加控件
  //   // map.addControl(new window.BMapGL.LocationControl());
  // }, [])
  const getAdress = (latLng) => {
    let geoc = new window.BMapGL.Geocoder(); //地址解析对象
    geoc.getLocation(latLng, (res) => {
      setAddress(res.address)
    })
  }
  return <Map center={center} zoom="11" style={{ height: '250px' }} ref={mapRef}>
    <Marker position={center} enableDragging onMouseup={(e) => { getAdress(e.latLng) }} />
    <ScaleControl />
    <ZoomControl />
  </Map>
}

export default BaiduMap;